<template>
    <div>
        <el-form :inline="true">
        </el-form>
        <el-table
            :data="tableData"
            style="width: 100%;margin-bottom: 20px;"
            row-key="u_id"
            border
            default-expand-all
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column
                prop="oid"
                label="记录ID"
                sortable
                width="120">
        </el-table-column>
        <el-table-column
                prop="createTime"
                label="记录创建时间"
                width="220">
        </el-table-column>
        <el-table-column
                prop="cid"
                label="会议室名"
                width="200">
        </el-table-column>
        <el-table-column
                prop="uid"
                label="用户名"
                width = "120">
        </el-table-column>
        <el-table-column
                prop="peopleCount"
                label="人数"
                width="120">
        </el-table-column>
        <el-table-column
                prop="startTime"
                label="开始时间"
                width="180">
        </el-table-column>
        <el-table-column
                prop="endTime"
                label="结束时间"
                width="180">
        </el-table-column>
        <el-table-column
                prop="status"
                label="状态"
                width="120">
            <template slot-scope="scope">
                <el-tag v-if="scope.row.status === '已签到'" type="success">
                    已签到
                </el-tag>
                <el-tag v-else-if="scope.row.status === '未签到'" type="danger">
                    未签到
                </el-tag>
                <el-tag v-else-if="scope.row.status === '已预约'" type="danger">
                    已预约
                </el-tag>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        size="small"  @click="editChange(scope.row)">编辑</el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="confirmDelete(scope.$index, scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
        <el-dialog
                title="提示"
                :visible.sync="dialogFormVisible"
                width="30%">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<!--                <el-form-item label="会议室ID" prop="ID"  >-->
<!--                    <el-input v-model="ruleForm.oid" placeholder="自动生成" :disabled="true"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="用户ID" prop="name">-->
<!--                    <el-input v-model="ruleForm.uid" disabled></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="房间ID">-->
<!--                    <el-input v-model="ruleForm.cid" disabled></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="开始时间" prop="capacity" disabled>-->
<!--                    <el-input v-model="ruleForm.startTime"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="结束时间" prop="capacity" disabled>-->
<!--                    <el-input v-model="ruleForm.endTime"></el-input>-->
<!--                </el-form-item>-->
                <el-form-item label="状态" prop="status">
                    <el-radio-group v-model="ruleForm.status">
                        <el-radio label="已签到"></el-radio>
                        <el-radio label="未签到"></el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="changeFormData">确 定</el-button>
            </span>
        </el-dialog>
        <el-pagination
                background
                layout="prev, pager, next"
                :page-size="pageSize"
                :total="totalNumber"
                @current-change="page">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        inject:['reload'],
        name: "RecordedData",
        data(){
            return{
                dialogFormVisible:false,
                pageSize: 12,
                totalNumber: 1,
                editForm:{
                },
                ruleForm:{
                    oid:"",
                    uid:"",
                    cid:"",
                    peopleCount:"",
                    startTime:"",
                    endTime:"",
                    createTime:"",
                    status:"",
                },
                rules:[],
                tableData:[{
                    oId:"",
                    uId:"",
                    cId:"",
                    peopleCount:"",
                    startTime:"",
                    endTime:"",
                    createTime:"",
                    status:"",
                }]
            }
        },
        mounted() {
            this.getPage();
        },
        methods:{
            page(currentPage) {
                this.$axios({
                    method:"post",
                    url:"http://localhost/orderrecord/getOrderList",
                    params:{
                        current:currentPage,
                        size:5
                    }
                }).then(res =>{
                    console.log(res)
                    this.tableData = res.data.data.records;
                    let total = res.data.data.total
                    this.totalNumber = total
                    this.pageSize = res.data.data.size
                })
            },
            getPage() {
                this.$axios({
                    method:"post",
                    url:"http://localhost/orderrecord/getOrderList",
                    params:{
                        current:1,
                        size:5
                    }
                }).then(res =>{
                    console.log(res)
                    this.tableData = res.data.data.records;
                    let total = res.data.data.total
                    this.totalNumber = total
                    this.pageSize = res.data.data.size
                })
            },
            editChange(row){
                this.dialogFormVisible = true
                this.ruleForm = row
                // this.ruleForm.id = this.ruleForm.c_id
                 this.ruleForm.oId = this.ruleForm.oid
                console.log(row)
            },
            changeFormData(){
                this.$axios({
                    method:"post",
                    url:"http://localhost:80/orderrecord/update",
                    params:this.ruleForm
                }).then(res=>{
                    this.getMessage(res.data.msg)
                    console.log(res)
                    if (res.data.msg === "更新成功"){
                        this.reload()
                    }

                })
            },

            getMessage(msg){
                this.$message({
                        type: "success",
                        message: msg
                    }
                )
            },
            confirmDelete(index,row) {
                this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios({
                        method:"delete",
                        url:"http://localhost:80/orderrecord/deleteById",
                        params:{
                            id:row.oid
                        }
                    }).then(res =>{
                        console.log(res)
                        let code = res.data.code
                        if (code === 200){
                            this.getMessage(res.data.msg)
                            this.reload()
                        }
                        else {
                            this.getMessage(res.data.msg)
                            this.reload()
                        }

                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        }

    }
</script>

<style scoped>

</style>
